<!--
 * @Author: your name
 * @Date: 2022-04-27 09:35:26
 * @LastEditTime: 2024-12-02 11:52:29
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jzjy\src\views\ActiveCenter\index.vue
-->
<template>
  <div id="container">
    <main>
      <!-- 左侧悬浮栏 -->
      <div class="caidan" v-if="false">
        <div class="floatingLeft">
          <ul>
            <li
              @click="goToAnchor('#type' + (index + 1), index + 1)"
              :class="{ choseLi: leftValue == index + 1 }"
              v-for="(item, index) in fenleiList"
              :key="item.id"
              v-show="item.lists.length != 0"
            >
              <span>{{ item.title }}</span>
            </li>
            <!-- <li
              @click="goToAnchor('#tjhd', 1)"
              :class="{ choseLi: leftValue == 1 }"
              v-show="tjhdShow"
            >
              <span>推荐活动</span>
            </li>
            <li
              @click="goToAnchor('#jczb', 2)"
              :class="{ choseLi: leftValue == 2 }"
              v-show="jczbShow"
            >
              <span>精彩直播</span>
            </li>
            <li
              @click="goToAnchor('#jcjx', 3)"
              :class="{ choseLi: leftValue == 3 }"
              v-show="jcjxShow"
            >
              <span>教材教学</span>
            </li> -->
            <!-- <li
              @click="goToAnchor('#type'+index+4, index+4)"
              :class="{ choseLi: leftValue == index+4 }"
              v-for="(item,index) in activityfl_lists" :key="item.id"
              v-show="item.lists.length !=0"
            >
              <span>{{item.title}}</span>
            </li> -->
            <!-- <li
              @click="goToAnchor('#gkbk', 4)"
              :class="{ choseLi: leftValue == 4 }"
              v-show="gkbkShow"
            >
              <span>高考备考</span>
            </li>
            <li
              @click="goToAnchor('#ztjx', 5)"
              :class="{ choseLi: leftValue == 5 }"
              v-show="ztjxShow"
            >
              <span>真题解析</span>
            </li>
            <li
              @click="goToAnchor('#nlts', 6)"
              :class="{ choseLi: leftValue == 6 }"
              v-show="nltsShow"
            >
              <span>能力提升</span>
            </li>
            <li
              @click="goToAnchor('#sztz', 7)"
              :class="{ choseLi: leftValue == 7 }"
              v-show="sztzShow">
              <span>素质拓展</span>
            </li> -->
          </ul>
        </div>
      </div>
      <!-- 上半部分 -->
      <div class="top" @mouseleave="caidanHide">
        <div class="left">
          <!-- <div
            id="jcjx"
            class="tap"
            @mouseover="showJcjx"
            style="margin-top: 30px"
          >
            教材教学
          </div> -->
          <!-- <div id="jcjx" class="tap"  @mouseover="showAcFl(index)"
            v-for="(item, index) in classList"
            :key="item.id"
            style="margin-top: 30px"
          >
            {{ item.title }}
          </div> -->
          <div
            id="jcjx"
            class="tap"
            @mouseover="showAcFl(item.id)"
            v-for="item in topLeft"
            :key="item.id"
            style="margin-top: 30px"
          >
            {{ item.title }}
          </div>
        </div>
        <div class="lunbo" v-if="bannerLists.length == 1">
          <el-carousel
            indicator-position="none"
            height="427px"
            arrow="never"
            :autoplay="false"
          >
            <el-carousel-item v-for="item in bannerLists" :key="item.id">
              <img :src="item.file_url" alt="" @click="advert(item.http_url)" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 无BANNER -->
        <div>
          <div
            class="noActive"
            style="width: 700px; height: 240px; background: #ccc"
            v-if="bannerLists.lenght == 0"
          >
            <!-- <img src="../../assets/img/noActive.png" alt="" /> -->
          </div>
        </div>
        <div class="lunbo" v-if="bannerLists.length > 1">
          <el-carousel
            indicator-position="none"
            height="427px"
            arrow="always"
            :autoplay="false"
          >
            <el-carousel-item v-for="item in bannerLists" :key="item.id">
              <img :src="item.file_url" alt="" @click="advert(item.http_url)" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right" @mouseover="caidanHide">
          <div class="touxiang">
            <img :src="file_url" alt="" />
          </div>
          <div class="msg">
            <div class="Num">
              <div class="title">
                <img
                  src="../../assets/img/activeNew/activeIndex_new11.png"
                  alt=""
                />
                <h5>累计学习</h5>
              </div>
              <div class="times">
                <span>{{ sjtj.ljxx }}</span>
              </div>
            </div>
            <div class="Num">
              <div class="title">
                <img
                  src="../../assets/img/activeNew/activeIndex_new6.png"
                  alt=""
                />
                <h5>今日学习</h5>
              </div>
              <div class="times">
                <span>{{ sjtj.jrxx }}</span>
              </div>
            </div>
            <div class="Num">
              <div class="title">
                <img
                  src="../../assets/img/activeNew/activeIndex_new8.png"
                  alt=""
                />
                <h5>教材教学</h5>
              </div>
              <div class="times">
                <span>{{ sjtj.jcjx }}</span>
              </div>
            </div>
            <div class="Num">
              <div class="title">
                <img
                  src="../../assets/img/activeNew/activeIndex_new11.png"
                  alt=""
                />
                <h5>主题活动</h5>
              </div>
              <div class="times">
                <span>{{ sjtj.zthd }}</span>
              </div>
            </div>
            <div class="Num" style="margin-bottom: 0px">
              <div class="title">
                <img
                  src="../../assets/img/activeNew/activeIndex_new5.png"
                  alt=""
                />
                <h5>直播活动</h5>
              </div>
              <div class="times">
                <span>{{ sjtj.zbhd }}</span>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="myclass" @click="goMyclasss">我的课程</div>
            <div class="kemu" @click="dialogTableVisible = true">
              <h3>{{ kemu_id == 1 ? "语文" : "英语" }}</h3>
              <img
                src="../../assets/img/activeNew/activeIndex_new7.png"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="caidanMsg" v-if="caidanShow">
          <div class="caidanContent">
            <div class="bigTitle">
              <h3>教材教学</h3>
              <p>攻克重难点</p>
            </div>
            <div class="details" v-for="item in jcjxList" :key="item.id">
              <div class="bookTitle">
                <h4>{{ item.title }}</h4>
              </div>
              <div class="fenlei">
                <div
                  class="flList"
                  v-for="list in item.clists"
                  :key="list.id"
                  @click="goJcjxAllAcList(item.id)"
                >
                  <h5>{{ list.title }}</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="caidanMsg" v-if="false">
          <div class="caidanContent">
            <div class="bigTitle" style="margin-bottom: 28px">
              <h3>{{ acflbq.title }}</h3>
              <p>{{ acflbq.sub_title }}</p>
            </div>
            <div class="details" v-show="acflbq.tag_lists.length != 0">
              <div class="fenlei">
                <div
                  class="flList"
                  v-for="item in acflbq.tag_lists"
                  :key="item.id"
                >
                  <h5 @click="goBqAllAcList(item.id)">{{ item.title }}</h5>
                </div>
              </div>
              <div class="classTj" v-show="acflbq.tj_lists.length != 0">
                <h3>好课推荐</h3>
                <div class="classLists">
                  <div
                    class="classBox"
                    v-for="item in acflbq.tj_lists"
                    :key="item.id"
                    @click="goActiveDetails(item.id, 'hd')"
                  >
                    <div class="pic">
                      <img :src="item.file_url" alt="" />
                    </div>
                    <div class="title">
                      <p>{{ item.title }}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="caidanMsgNew" v-if="flShow">
          <div class="caidanContent">
            <div class="bigTitle" v-if="lists1.length != 0">
              <h3>直播预告</h3>
            </div>
            <div class="classTj" v-if="lists1.length != 0">
              <div class="classLists">
                <div
                  class="classBox"
                  v-for="item in lists1"
                  :key="item.id"
                  @click="goActiveDetails(item.id, 'hd')"
                >
                  <div class="pic">
                    <img :src="item.file_url" alt="" />
                  </div>
                  <div class="title">
                    <p>{{ item.title }}</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="bigTitle" v-if="lists2.length != 0">
              <h3>往期回顾</h3>
            </div>
            <div class="classTj" v-if="lists2.length != 0">
              <div class="classLists">
                <div
                  class="classBox"
                  v-for="item in lists2"
                  :key="item.id"
                  @click="goActiveDetails(item.id, 'hd')"
                >
                  <div class="pic">
                    <img :src="item.file_url" alt="" />
                  </div>
                  <div class="title">
                    <p>{{ item.title }}</p>
                  </div>
                </div>
                <div class="activeBox noactive" v-if="lists2.length < 3">
                  <img src="../../assets/img/activeNew/aczwt2.png" alt="" />
                </div>
              </div>
            </div>
            <div
              class="activeBox noactive"
              v-if="lists1.length == 0 && lists2.length == 0"
            >
              <img src="../../assets/img/activeNew/aczwt2.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 教师列表 -->
      <div class="teachers">
        <h3>授课专家</h3>
        <div class="leftAn" @click="leftAn">
          <img src="../../assets/img/activeNew/activeIndex_new1.png" alt="" />
        </div>
        <div class="rightAn" @click="rightAn">
          <img src="../../assets/img/activeNew/activeIndex_new2.png" alt="" />
        </div>
        <div class="teacherShow">
          <div class="teacherLists">
            <div
              class="teacherBox"
              v-for="(item, index) in teacherLists.concat(
                teacherLists.slice(0, 8)
              )"
              :key="index"
              @click="showTeacher(index)"
            >
              <div class="pic">
                <img :src="item.file_url" alt="" />
              </div>
              <div class="msg">
                <h5>{{ item.title }}</h5>
                <p>{{ item.zhicheng }}</p>
              </div>
            </div>
          </div>
          <el-dialog :visible.sync="dialogVisibleTc" width="480px">
            <div class="teacherShow1">
              <div class="personal">
                <img :src="showtcFile_url" alt="" />
                <div class="pertitle">
                  <h4>{{ showtcTitle }}</h4>
                  <p>{{ showtcZhicheng }}</p>
                </div>
              </div>
              <div class="msg">
                <p v-for="item in showtcMsg" :key="item">
                  <span></span>
                  <a>{{ item }}</a>
                </p>
              </div>
              <div class="dosome">
                <div class="nomore" v-show="tcindex == 0">上一位</div>
                <div class="pre" v-show="tcindex > 0" @click="preTc">
                  上一位
                </div>
                <div class="nomore" v-show="tcindex == teacherLists.length - 1">
                  下一位
                </div>
                <div
                  class="next"
                  v-show="tcindex < teacherLists.length - 1"
                  @click="nextTc"
                >
                  下一位
                </div>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
      <div class="actives" v-if="false">
        <!-- 顶部三大分类 教材教学 精彩直播 推荐活动 -->
        <div
          class="contentBox"
          :id="'type' + (index + 1)"
          v-for="(item, index) in topAcLists"
          :key="index + 1"
          v-show="item.lists.length != 0"
        >
          <!-- 活动列表标题 -->
          <div class="topTitle">
            <div class="left">
              <h2>{{ item.title }}</h2>
              <p>{{ item.sub_title }}</p>
            </div>
            <div class="right" @click="goAllAcList">
              <p>查看全部</p>
              <img src="../../assets/img/activeNew/activeIndex_new4.png" />
            </div>
          </div>
          <!-- 活动列表 -->
          <div class="content">
            <div class="activeBox" v-for="list in item.lists" :key="list.id">
              <div class="pic">
                <img
                  :src="list.file_url"
                  alt=""
                  @click="goActiveDetails(list.id, list.type_str)"
                />
              </div>
              <div
                class="actitle"
                @click="goActiveDetails(list.id, list.type_str)"
              >
                <h4>{{ list.title }}</h4>
              </div>
              <p>授课专家：{{ list.teachers_title }}</p>
              <div class="bottom" v-if="list.type_str == 'hd'">
                <div
                  class="zhuangtai"
                  :class="{
                    novideo: list.end_time * 1000 < new Date().getTime(),
                  }"
                >
                  <div
                    class="time"
                    v-if="list.start_time * 1000 > new Date().getTime()"
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    <p>
                      开播时间：{{
                        timeStamp2String(list.start_time * 1000, 9)
                      }}
                    </p>
                  </div>
                  <div
                    class="time"
                    v-if="
                      list.start_time * 1000 < new Date().getTime() &&
                      list.end_time * 1000 > new Date().getTime()
                    "
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new19.gif"
                      alt=""
                    />
                    <p>直播中</p>
                  </div>
                  <div
                    class="time"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() &&
                      list.have_video == 1
                    "
                    @click="goActiveDetails(list.id, list.type_str)"
                    style="color: #cbcbcb; border-color: #cbcbcb"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new12.png"
                      alt=""
                      style="width: 22px; height: 19px"
                    />
                    <p style="color: #cbcbcb">已结束</p>
                  </div>
                  <div
                    class="time"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() &&
                      list.have_video == 0
                    "
                    style="border: 0; margin-left: 35px"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new3.png"
                      alt=""
                      style="width: 18px; height: 19px"
                    />
                    <p style="color: #cbcbcb">活动已结束</p>
                  </div>
                  <!-- 直播未开始 + 未报名 -->
                  <div
                    class="type"
                    v-if="
                      list.bm_status == 0 &&
                      list.start_time * 1000 > new Date().getTime()
                    "
                    style="color: #07a579"
                    @click="baoming(list.id, list.title)"
                  >
                    预约
                  </div>
                  <!-- 直播未开始 + 已报名 -->
                  <div
                    class="type"
                    v-if="
                      list.bm_status == 1 &&
                      list.start_time * 1000 > new Date().getTime()
                    "
                    style="background-color: #07a579; color: #fff"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    已预约
                  </div>
                  <!-- 直播已开始还没结束 -->
                  <div
                    class="type"
                    v-if="
                      list.start_time * 1000 < new Date().getTime() &&
                      list.end_time * 1000 > new Date().getTime()
                    "
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    进入直播
                  </div>
                  <!-- 直播已结束 + 有回放 -->
                  <div
                    class="type"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() &&
                      list.have_video == 1
                    "
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    查看回放
                  </div>
                </div>
              </div>
              <div class="bottom" v-if="list.type_str == 'jcjx'">
                <div class="zhuangtai" :class="{ novideo: true }">
                  <div
                    class="time"
                    style="color: #cbcbcb; border-color: #cbcbcb"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new12.png"
                      alt=""
                      style="width: 22px; height: 19px"
                    />
                    <p style="color: #cbcbcb">已结束</p>
                  </div>
                  <!-- 直播已结束 + 有回放 -->
                  <div
                    class="type"
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    查看回放
                  </div>
                </div>
              </div>
            </div>
            <div class="activeBox noactive" v-for="item in 1" :key="item">
              <img src="../../assets/img/activeNew/aczwt2.png" alt="" />
            </div>
          </div>
        </div>
        <!-- 下面自由分类活动列表 -->
        <div
          class="contentBox"
          :id="'type' + (index + 3)"
          v-for="(item, index) in activityfl_lists"
          :key="index + 4"
          v-show="item.lists.length != 0"
        >
          <!-- 活动列表标题 -->
          <div class="topTitle">
            <div class="left">
              <h2>{{ item.title }}</h2>
              <p>{{ item.sub_title }}</p>
            </div>
            <div class="right" @click="goAllAcList">
              <p>查看全部</p>
              <img
                src="../../assets/img/activeNew/activeIndex_new4.png"
                alt=""
              />
            </div>
          </div>
          <!-- 活动列表 -->
          <div class="content">
            <div class="activeBox" v-for="list in item.lists" :key="list.id">
              <div class="pic">
                <img
                  :src="list.file_url"
                  alt=""
                  @click="goActiveDetails(list.id, list.type_str)"
                />
              </div>
              <div
                class="actitle"
                @click="goActiveDetails(list.id, list.type_str)"
              >
                <h4>{{ list.title }}</h4>
              </div>
              <p>授课专家：{{ list.teachers_title }}</p>
              <div class="bottom">
                <div
                  class="zhuangtai"
                  :class="{
                    novideo: list.end_time * 1000 < new Date().getTime(),
                  }"
                >
                  <div
                    class="time"
                    v-if="list.start_time * 1000 > new Date().getTime()"
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    <p>
                      开播时间：{{
                        timeStamp2String(list.start_time * 1000, 9)
                      }}
                    </p>
                  </div>
                  <div
                    class="time"
                    v-if="
                      list.start_time * 1000 < new Date().getTime() &&
                      list.end_time * 1000 > new Date().getTime()
                    "
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new9.png"
                      alt=""
                    />
                    <p>直播中</p>
                  </div>
                  <div
                    class="time"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() &&
                      list.have_video == 1
                    "
                    style="color: #cbcbcb; border-color: #cbcbcb"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new12.png"
                      alt=""
                      style="width: 22px; height: 19px"
                    />
                    <p style="color: #cbcbcb">已结束</p>
                  </div>
                  <div
                    class="time"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() &&
                      list.have_video == 0
                    "
                    style="border: 0; margin-left: 35px"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new3.png"
                      alt=""
                      style="width: 18px; height: 19px"
                    />
                    <p style="color: #cbcbcb">活动已结束</p>
                  </div>

                  <!-- 右侧 -->
                  <!-- 直播未开始 + 未报名 -->
                  <div
                    class="type"
                    v-if="
                      list.bm_status == 0 &&
                      list.start_time * 1000 > new Date().getTime()
                    "
                    style="color: #07a579"
                    @click="baoming(list.id, list.title)"
                  >
                    预约
                  </div>
                  <!-- 直播未开始 + 已报名 -->
                  <div
                    class="type"
                    v-if="
                      list.bm_status == 1 &&
                      list.start_time * 1000 > new Date().getTime()
                    "
                    style="background-color: #07a579; color: #fff"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    已预约
                  </div>
                  <!-- 直播已开始还没结束 -->
                  <div
                    class="type"
                    v-if="
                      list.start_time * 1000 < new Date().getTime() &&
                      list.end_time * 1000 > new Date().getTime()
                    "
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    进入直播
                  </div>
                  <!-- 直播已结束 + 有回放 -->
                  <div
                    class="type"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() &&
                      list.have_video == 1
                    "
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, list.type_str)"
                  >
                    查看回放
                  </div>
                </div>
              </div>
            </div>
            <div class="activeBox noactive" v-for="item in 1" :key="item">
              <img src="../../assets/img/activeNew/aczwt2.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="actives">
        <!-- 顶部三大分类 教材教学 精彩直播 推荐活动 -->
        <div
          class="contentBox"
          :id="'type' + 1"
        >
          <div class="topTitle">
            <div class="left">
              <h2>直播预告</h2>
            </div>
            <div class="right" @click="goAllAcList(1)">
              <p>查看全部</p>
              <img src="../../assets/img/activeNew/activeIndex_new4.png" />
            </div>
          </div>
          <div class="content">
            <div class="activeBox" v-for="list in zbList" :key="list.id">
              <div class="pic">
                <img
                  :src="list.file_url"
                  alt=""
                  @click="goActiveDetails(list.id, 'hd')"
                />
              </div>
              <div class="actitle" @click="goActiveDetails(list.id, 'hd')">
                <h4>{{ list.title }}</h4>
              </div>
              <p>授课专家：{{ list.teacher_title }}</p>
              <div class="bottom">
                <div
                  class="zhuangtai"
                  :class="{
                    novideo: list.end_time * 1000 < new Date().getTime(),
                  }"
                >
                  <div class="time"
                    v-if="list.start_time * 1000 > new Date().getTime()"
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    <p>
                      开播时间：{{
                        timeStamp2String(list.start_time * 1000, 9)
                      }}
                    </p>
                  </div>
                  <div  class="time"
                    v-if="
                      list.start_time * 1000 < new Date().getTime() &&
                      list.end_time * 1000 > new Date().getTime()
                    "
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new19.gif"
                      alt=""
                    />
                    <p>直播中</p>
                  </div>
                  <div
                    class="time"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() &&
                      list.have_video == 1
                    "
                    @click="goActiveDetails(list.id, 'hd')"
                    style="color: #cbcbcb; border-color: #cbcbcb"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new12.png"
                      alt=""
                      style="width: 22px; height: 19px"
                    />
                    <p style="color: #cbcbcb">已结束</p>
                  </div>
                  <div
                    class="time"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() &&
                      list.have_video == 0
                    "
                    style="border: 0; margin-left: 35px"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new3.png"
                      alt=""
                      style="width: 18px; height: 19px"
                    />
                    <p style="color: #cbcbcb">活动已结束</p>
                  </div>
                  <!-- 直播未开始 + 未报名 -->
                  <div
                    class="type"
                    v-if="
                      list.bm_status == 0 &&
                      list.start_time * 1000 > new Date().getTime()
                    "
                    style="color: #07a579"
                    @click="baoming(list.id, list.title)"
                  >
                    预约
                  </div>
                  <!-- 直播未开始 + 已报名 -->
                  <div
                    class="type"
                    v-if="
                      list.bm_status == 1 &&
                      list.start_time * 1000 > new Date().getTime()
                    "
                    style="background-color: #07a579; color: #fff"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    已预约
                  </div>
                  <!-- 直播已开始还没结束 -->
                  <div
                    class="type"
                    v-if="
                      list.start_time * 1000 < new Date().getTime() &&
                      list.end_time * 1000 > new Date().getTime()
                    "
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    进入直播
                  </div>
                  <!-- 直播已结束 + 有回放 -->
                  <div
                    class="type"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() &&
                      list.have_video == 1
                    "
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    查看回放
                  </div>
                </div>
              </div>
            </div>
            <div class="activeBox noactive" v-if="zbList.length <4">
              <img src="../../assets/img/activeNew/aczwt2.png" alt="" />
            </div>
          </div>
        </div>
        <div
          class="contentBox"
          :id="'type' + 3"
        >
          <!-- 活动列表标题 -->
          <div class="topTitle">
            <div class="left">
              <h2>往期回顾</h2>
            </div>
            <div class="right" @click="goAllAcList(3)">
              <p>查看全部</p>
              <img
                src="../../assets/img/activeNew/activeIndex_new4.png"
                alt=""
              />
            </div>
          </div>
          <!-- 活动列表 -->
          <div class="content">
            <div class="activeBox" v-for="list in hgList" :key="list.id">
              <div class="pic">
                <img
                  :src="list.file_url"
                  alt=""
                  @click="goActiveDetails(list.id, 'hd')"
                />
              </div>
              <div class="actitle" @click="goActiveDetails(list.id, 'hd')">
                <h4>{{ list.title }}</h4>
              </div>
              <p>授课专家：{{ list.teacher_title }}</p>
              <div class="bottom">
                <div
                  class="zhuangtai"
                  :class="{
                    novideo: list.end_time * 1000 < new Date().getTime(),
                  }"
                >
                  <div
                    class="time"
                    v-if="list.start_time * 1000 > new Date().getTime()"
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    <p>
                      开播时间：{{
                        timeStamp2String(list.start_time * 1000, 9)
                      }}
                    </p>
                  </div>
                  <div
                    class="time"
                    v-if="
                      list.start_time * 1000 < new Date().getTime() &&
                      list.end_time * 1000 > new Date().getTime()
                    "
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new9.png"
                      alt=""
                    />
                    <p>直播中</p>
                  </div>
                  <div
                    class="time"
                    v-if="
                      list.end_time * 1000 < new Date().getTime()
                    "
                    style="color: #cbcbcb; border-color: #cbcbcb"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new12.png"
                      alt=""
                      style="width: 22px; height: 19px"
                    />
                    <p style="color: #cbcbcb">已结束</p>
                  </div>
                  <!-- <div
                    class="time"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() &&
                      list.have_video == 0
                    "
                    style="border: 0; margin-left: 35px"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    <img
                      src="../../assets/img/activeNew/activeIndex_new3.png"
                      alt=""
                      style="width: 18px; height: 19px"
                    />
                    <p style="color: #cbcbcb">活动已结束</p>
                  </div> -->

                  <!-- 右侧 -->
                  <!-- 直播未开始 + 未报名 -->
                  <div
                    class="type"
                    v-if="
                      list.bm_status == 0 &&
                      list.start_time * 1000 > new Date().getTime()
                    "
                    style="color: #07a579"
                    @click="baoming(list.id, list.title)"
                  >
                    预约
                  </div>
                  <!-- 直播未开始 + 已报名 -->
                  <div
                    class="type"
                    v-if="
                      list.bm_status == 1 &&
                      list.start_time * 1000 > new Date().getTime()
                    "
                    style="background-color: #07a579; color: #fff"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    已预约
                  </div>
                  <!-- 直播已开始还没结束 -->
                  <div
                    class="type"
                    v-if="
                      list.start_time * 1000 < new Date().getTime() &&
                      list.end_time * 1000 > new Date().getTime()
                    "
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    进入直播
                  </div>
                  <!-- 直播已结束 + 有回放 -->
                  <div
                    class="type"
                    v-if="
                      list.end_time * 1000 < new Date().getTime() 
                    "
                    style="color: #07a579"
                    @click="goActiveDetails(list.id, 'hd')"
                  >
                    查看回放
                  </div>
                </div>
              </div>
            </div>
            <div class="activeBox noactive" v-if="hgList.length <4">
              <img src="../../assets/img/activeNew/aczwt2.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- 报名时个人信息不完善，提交信息弹窗 -->
      <UserInfoBox
        v-if="userMsgShow"
        :yymsg="yymsg"
        @openSuccessTc="openSuccessTc"
      ></UserInfoBox>
      <!-- 预约成功弹窗 -->
      <YuyueBox
        v-if="signSuccess"
        :yymsg="yymsg"
        @closeYytc="closeYytc"
      ></YuyueBox>
      <!-- 切换学科弹窗 -->
      <div class="choseClass">
        <el-dialog
          title=""
          :visible.sync="dialogTableVisible"
          :close-on-click-modal="true"
          :close-on-press-escape="true"
          :show-close="true"
          center
          width="600px"
        >
          <div class="chose">
            <p>选择学科：</p>
            <div class="tab1 taps">
              <div
                class="classRadio"
                v-for="item in classList"
                :key="item.id"
                @click="changeKemu(item.id)"
              >
                <div class="tips1 tips" v-if="radio1 != item.id">
                  <span></span>
                </div>
                <div class="tips2 tips" v-if="radio1 == item.id">
                  <span></span>
                </div>
                <p>{{ item.title }}</p>
              </div>
            </div>
            <p>选择教学版本：</p>
            <div class="tab2 taps">
              <div
                class="classRadio"
                v-for="item in banbenList"
                :key="item.id"
                @click="radio2 = item.id"
              >
                <div class="tips1 tips" v-if="radio2 != item.id">
                  <span></span>
                </div>
                <div class="tips2 tips" v-if="radio2 == item.id">
                  <span></span>
                </div>
                <p>{{ item.title }}</p>
              </div>
            </div>
            <div class="submitSet" @click="submit">
              <span>提交</span>
            </div>
          </div>
        </el-dialog>
      </div>
    </main>
  </div>
</template>

<script>
import { timeStamp2String } from "../../utils/time";
import YuyueBox from "../../components/yuyueBox/yuyueBox.vue"; // vue2
import UserInfoBox from "../../components/userInfoBox/userInfoBox.vue"; // vue2
import {
  userinfo,
  list_teachers,
  banner,
  list_activityhdxd,
  activitytj_new,
  loc_kefuewm,
  bookslists,
  list_activityfl,
  activityindex_new,
  sjtj_hd,
  bm_activity,
  kemulists,
  versionslists,
  setnowkemu,
  list_zbhd,
  list_zbhd_index,
} from "../../api/http";
export default {
  inject: ["reload"],
  data() {
    return {
      timeStamp2String,
      timeNow: "", //当前时间的时间戳
      tjdata: {}, //数据统计总
      video_nums: "", //学习的视频数量
      video_times_hours: "", //总学习小时
      video_times_min: "", //总学习分钟
      video_times_date: "", //今日学习时间
      dialogVisibleTc: false, //预览的显示
      yulanPics: [], //心得表格预览信息

      picMoveWidth: 0, //第一种图片位移距离

      //4.2版本迭代

      bannerLists: [], //banner列表
      teacherLists: [], //教师列表
      tcindex: "", //选中查看的教师下标
      showtcFile_url: "", //教师弹窗头像
      showtcTitle: "", //教师弹窗姓名
      showtcZhicheng: "", //教师弹窗简介
      showtcMsg: [], //教师弹窗介绍
      activeLists: [], //活动列表
      activePjLists: [], //活动评价列表
      steep: 0, //教师列表移动
      steep1: 0, //教师评价移动速度
      steep2: 0, //活动图片移动速度
      timer: null,
      timer2: null,
      acindex: 2,
      xdallnum: 0, //心得总数量
      steepHeight: 0,

      dqevm: "", //地区客服二维码

      //活动升级版本
      leftValue: "", //左侧悬浮栏值
      tjhdShow: false, //菜单栏标签展示
      jczbShow: false, //菜单栏标签展示
      jcjxShow: false, //菜单栏标签展示
      gkbkShow: false, //菜单栏标签展示
      ztjxShow: false, //菜单栏标签展示
      nltsShow: false, //菜单栏标签展示
      sztzShow: false, //菜单栏标签展示
      caidanShow: false, //顶部菜单详情展示栏
      sjtj: {}, //活动主页数据统计
      file_url: "", //个人头像
      kejianversions_id: "", //版本id
      kemu_id: "", //科目
      nianji_id: "", //年级id
      jcjxList: [], //教材教学书本列表
      flShow: false, //活动分类和标签展示框
      acflLists: [], //分类标签列表
      acflbq: {}, //活动分类和标签内容详情
      //活动课程各分类列表
      topAcLists: [], //上面三个固定活动分类
      activityfl_lists: [], //分类活动列表
      fenleiList: [], //总分类列表

      yymsg: {}, //预约成功信息
      userMsgShow: false, //报名时完善信息弹窗
      signSuccess: false, //报名弹窗显示隐藏

      //切换学科
      dialogTableVisible: false, //qiehuan科目弹窗
      classList: [], //学科列表
      banbenList: [], //版本列表
      radio1: "", //学科值
      radio2: "", //版本值
      topLeft: [],
      topInfo: {},
      topList: [],
      lists1: [],
      lists2: [],
      zbList: [],
      hgList: [],
    };
  },
  components: {
    UserInfoBox,
    YuyueBox,
  },
  created() {
    
    this.getbanner(); //获取活动主页banner
    this.getlist_zbhd();
    this.getLists();
    this.getTeachers(); //获取教师列表
    // this.getactiveTj(); //获取活动统计数据
    this.getNum(); //获取主页数据活动统计
    
    
    //回到顶部
    $(document).ready(function () {
      $(window).scrollTop(0);
    });
    this.timeNow = Date.now();
    console.log(Date.now() > 1659139200 * 1000);

    //判断过期
    userinfo({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "geren xinxi ");
      if (res.retRes.sy_end_time * 1000 < Date.parse(new Date())) {
        this.$router.push({
          name: "Login",
          query: {
            isgq: 1,
          },
        });
      } else {
        const data = res.retRes;
        this.file_url = data.file_url;
        this.radio1 = this.kemu_id = data.kemu_id;
        this.kejianversions_id = data.kejianversions_id;
        this.nianji_id = data.nianji_id;
        // list_activityhdxd({
        //   md5key: localStorage.getItem("md5key"),
        //   type_id: 1,
        //   kemu_id: this.kemu_id,
        // }).then((res) => {
        //   console.log(res, "活动心得");
        //   this.xdallnum = res.retRes.length;
        //   console.log(this.xdallnum, "caonima ");
        // });

        //获取教学版本列表
        versionslists({
          md5key: localStorage.getItem("md5key"),
          kemu_id: this.radio1 ? this.radio1 : "1",
        }).then((res) => {
          // console.log(res, "版本列表");
          const data = res.retRes;
          if (res.retInt == 1) {
            this.banbenList = data;
          }
        });
        //获取科目列表
        kemulists({ md5key: localStorage.getItem("md5key") }).then((res) => {
          // console.log(res, "科目列表");
          const data = res.retRes;
          if (res.retInt == 1) {
            this.classList = data;
          }
        });
        // this.getBook(); //获取教材教学书本列表
        // this.getAcFl(); //获取活动分类及标签
        // this.getActives(); //获取活动首页课程列表
      }
    });
    loc_kefuewm({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      console.log(res, "diqu erweima ");
      this.dqevm = res.retRes.kefu_file_url;
    });
  },
  mounted() {
    //重定向
    localStorage.setItem("path", "");

    // let caidan = document.querySelector(".floatingLeft");
    // if ($(window).width() >= 1520) {
    //   caidan.style.left = ($(window).width() - 1500) / 2 + "px";
    //   caidan.style.top = "200px";
    // } else {
    //   caidan.style.left = "20px";
    //   caidan.style.top = "200px";
    // }

    // window.addEventListener("scroll", this.handleScrollY, true);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    clearInterval(this.timer2);
    // window.removeEventListener("scroll", this.handleScrollY, true);
  },
  methods: {
    //获取
    getLists() {
      list_zbhd({
        zb_status_arr: [1, 2],
        is_tj: 1,
        page_size: 4,
      }).then((res) => {
        let data = res.retRes;
        data.forEach((item) => {
          this.zbList.push(item);
        });
      });
      list_zbhd({
        zb_status_arr: [3],
        is_tj: 1,
        page_size: 4,
      }).then((res) => {
        let data = res.retRes;
        data.forEach((item) => {
          this.hgList.push(item);
        });
      });
    },
    //获取所有活动
    getlist_zbhd() {
      list_zbhd_index().then((res) => {
        const data = res.retRes;
        this.topLeft = [];
        this.topList = [];
        data.forEach((item) => {
          this.topLeft.push({ id: item.id, title: item.title });
          this.topList.push(item);
        });
      });
    },
    //跳转广告图
    advert(href, id) {
      window.open(href, "_blank");
    },
    //切换科目后，版本会更新为选择的科目版本
    changeKemu(id) {
      this.radio1 = id;
      this.radio2 = "";
      //获取教学版本列表
      versionslists({
        kemu_id: this.radio1,
      }).then((res) => {
        // console.log(res, "版本列表");
        const data = res.retRes;
        if (res.retInt == 1) {
          this.banbenList = data;
        }
      });
    },
    //提交设置的科目和版本
    submit() {
      // console.log(this.radio3, this.radio1, this.radio2);
      if (!this.radio1) {
        this.$message({
          message: "请选择学科",
          duration: 1000,
          showClose: false,
        });
      } else if (!this.radio2) {
        this.$message({
          message: "请选择版本",
          duration: 1000,
          showClose: false,
          offset: 300,
        });
      } else {
        setnowkemu({
          md5key: localStorage.getItem("md5key"),
          kemu_id: this.radio1,
          kejianversions_id: this.radio2,
          is_now: 1,
        }).then((res) => {
          // console.log(res, "设置科目版本");
          this.$notify.closeAll();
          this.$notify({
            message: "设置科目和版本成功",
            duration: 2000,
            showClose: false,
          });
          this.dialogTableVisible = false;
          this.reload();
        });
      }
    },
    //左边悬浮窗锚点定位
    goToAnchor(selector, index) {
      console.log(document.querySelector(selector));
      const select = document.querySelector(selector);
      let scrollHeight = select.offsetTop - 180;
      console.log(scrollHeight);
      window.scrollTo({
        top: scrollHeight,
        behavior: "smooth",
      });
      this.leftValue = index;
    },
    //滚动监听
    handleScrollY() {
      const caidan = document.querySelector(".caidan");
      const teacher = document
        .querySelector(".teachers")
        .getBoundingClientRect().top;
      if (teacher <= 100) {
        caidan.style.display = "block";
      } else {
        caidan.style.display = "none";
      }
      // 左侧悬浮框双向定位
      const leftInfo = this.fenleiList;
      leftInfo.forEach((item, index) => {
        item.index = index + 1;
        item.name = "#type" + (index + 1);
        item.height = document
          .querySelector("#type" + (index + 1))
          .getBoundingClientRect().bottom;
      });
      this.leftValue = leftInfo.find((item) => item.height - 300 >= 0).index;
    },
    //获取教材教学书本列表
    getBook() {
      bookslists({
        md5key: localStorage.getItem("md5key"),
        kejianversions_id: this.kejianversions_id,
        nianji_id: this.nianji_id,
        kemu_id: this.kemu_id,
      }).then((res) => {
        console.log(res, "教材教学书本");
        this.jcjxList = res.retRes;
      });
    },
    //获取活动分类及标签
    getAcFl() {
      list_activityfl({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
      }).then((res) => {
        const data = res.retRes;
        console.log(res, "活动分类及标签");
        this.acflLists = data;
      });
    },
    //获取活动首页课程列表
    getActives() {
      activityindex_new({
        md5key: localStorage.getItem("md5key"),
        kemu_id: this.kemu_id,
      }).then((res) => {
        console.log(res, "活动首页课程列表");
        const data = res.retRes;
        this.topAcLists = [];
        this.topAcLists.push(data.tjhd);
        this.topAcLists.push(data.jczb);
        // this.topAcLists.push(data.jcjx);
        this.activityfl_lists = data.activityfl_lists;
        this.tjhdShow = data.tjhd.length != 0 ? true : false;
        this.jczbShow = data.jczb.length != 0 ? true : false;
        this.jcjxShow = data.jcjx.length != 0 ? true : false;
        console.log(this.topAcLists, "123123");
        this.fenleiList = [];
        this.fenleiList.push(...this.topAcLists);
        this.fenleiList.push(...this.activityfl_lists);
        console.log(this.fenleiList, "shishishis");
      });
    },
    openSuccessTc() {
      kemulists({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        res.retRes.forEach((item) => {
          if (this.kemu_id == item.id) {
            this.yymsg.file_url = item.gzh_file_url;
            this.yymsg.kemu_id = this.kemu_id;
            this.signSuccess = true;
          }
        });
      });
    },
    //关闭弹窗
    closeYytc() {
      this.signSuccess = false;
      this.getActives();
    },
    //展示教材教学菜单
    showJcjx() {
      this.flShow = false;
      this.caidanShow = true;
    },
    //隐藏菜单
    caidanHide() {
      setTimeout(() => {
        this.caidanShow = false;
        this.flShow = false;
      }, 100);
    },
    //展示标签菜单
    // showAcFl(index) {
    //   console.log(this.acflLists[index]);
    //   this.caidanShow = false;
    //   this.flShow = true;
    //   this.acflbq = this.acflLists[index];
    // },
    showAcFl(e) {
      console.log(e);
      this.lists1 = [];
      this.lists2 = [];
      this.topList.forEach((item) => {
        if (item.id == e) {
          if (item.lists1 && item.lists1.length >= 3) {
            this.lists1.push(item.lists1[0]);
            this.lists1.push(item.lists1[1]);
            this.lists1.push(item.lists1[2]);
          } else {
            this.lists1.push(...item.lists1);
          }
          if (item.lists2 && item.lists2.length >= 3) {
            this.lists2.push(item.lists2[0]);
            this.lists2.push(item.lists2[1]);
            this.lists2.push(item.lists2[2]);
          } else {
            this.lists2.push(...item.lists2);
          }
        }
      });
      this.flShow = true;
    },
    //获取活动主页banner
    getbanner() {
      banner({
        md5key: localStorage.getItem("md5key"),
        systypes_id: 10003,
        device_type_id: 201,
      }).then((res) => {
        console.log(res, "活动主页banner");
        this.bannerLists = res.retRes;
      });
    },
    //获取活动统计
    getactiveTj() {
      activitytj_new({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res, "活动统计数据");
          const data = res.retRes;
          this.tjdata = res.retRes;
          // this.video_nums = data.video_nums;
          // this.video_times_hours = Math.floor(data.video_times / 60);
          // this.video_times_min = Math.floor(data.video_times % 60);
          // this.video_times_date = data.video_times_date;
        }
      });
    },
    //获取活动主页数据统计
    getNum() {
      sjtj_hd({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        console.log(res);
        this.sjtj = res.retRes;
      });
    },
    //前往我得课程
    goMyclasss() {
      this.$router.push({
        name: "MyClass",
      });
    },
    //获取教师列表
    getTeachers() {
      list_teachers({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        console.log(res, "教师列表");
        this.teacherLists = res.retRes;
      });
    },
    //教师展示左右按钮
    leftAn() {
      const picWidth = 244;
      this.picMoveWidth += 244;
      let leftN = document.querySelector(".teacherLists");
      leftN.style.left = this.picMoveWidth + "px";
      leftN.style.transition = "all 0.5s ease-in-out";
      console.log(this.picMoveWidth);
      // console.log(leftN.style.left);
      this.steep = this.picMoveWidth;
      if (this.picMoveWidth >= 244) {
        setTimeout(() => {
          leftN.style.transition = "left 0s ease-in-out";
          leftN.style.left = -picWidth * (this.teacherLists.length - 1) + "px";
          this.picMoveWidth = -picWidth * (this.teacherLists.length - 1);
          this.steep = -picWidth * (this.teacherLists.length - 1);
        }, 500);
      }
    },
    rightAn() {
      let leftN = document.querySelector(".teacherLists");
      // console.log(leftN)
      // leftN.style.left = "100px"
      leftN.style.transition = "all 0.5s ease-in-out";
      const picWidth = 244;
      this.picMoveWidth -= 244;
      this.steep = this.picMoveWidth;
      leftN.style.left = this.picMoveWidth + "px";
      // console.log(this.picMoveWidth);
      console.log(this.picMoveWidth, -picWidth * this.teacherLists.length);
      if (this.picMoveWidth <= -picWidth * this.teacherLists.length) {
        setTimeout(() => {
          leftN.style.transition = "left 0s ease-in-out";
          leftN.style.left = 0 + "px";
          this.picMoveWidth = 0;
          this.steep = 0;
        }, 500);
      }
    },
    //展示教师信息
    showTeacher(index) {
      this.tcindex = index;
      this.dialogVisibleTc = true;
      this.showtcFile_url = this.teacherLists[this.tcindex].file_url;
      this.showtcTitle = this.teacherLists[this.tcindex].title;
      this.showtcZhicheng = this.teacherLists[this.tcindex].zhicheng;
      const msg = this.teacherLists[this.tcindex].sub_title;
      msg.replace(";", "；"); //替换可能存在的英文分号为中文分号
      this.showtcMsg = msg.split("；"); //根据中文分号分隔文字为数组
    },
    //弹窗上一位老师
    preTc() {
      this.tcindex--;
      this.showtcFile_url = this.teacherLists[this.tcindex].file_url;
      this.showtcTitle = this.teacherLists[this.tcindex].title;
      this.showtcZhicheng = this.teacherLists[this.tcindex].zhicheng;
      const msg = this.teacherLists[this.tcindex].sub_title;
      msg.replace(";", "；"); //替换可能存在的英文分号为中文分号
      this.showtcMsg = msg.split("；"); //根据中文分号分隔文字为数组
    },
    //弹窗下一位老师
    nextTc() {
      this.tcindex++;
      this.showtcFile_url = this.teacherLists[this.tcindex].file_url;
      this.showtcTitle = this.teacherLists[this.tcindex].title;
      this.showtcZhicheng = this.teacherLists[this.tcindex].zhicheng;
      const msg = this.teacherLists[this.tcindex].sub_title;
      msg.replace(";", "；"); //替换可能存在的英文分号为中文分号
      this.showtcMsg = msg.split("；"); //根据中文分号分隔文字为数组
    },
    //报名 预约
    baoming(id, title) {
      this.yymsg.title = title;
      this.yymsg.active_id = id;
      //获取用户信息用于报名
      userinfo({
        md5key: localStorage.getItem("md5key"),
      }).then((res) => {
        if (res.retInt == 1) {
          console.log(res);
          const data = res.retRes;
          if (data.jbxx_set == 0) {
            this.userMsgShow = true;
          } else {
            bm_activity({
              md5key: localStorage.getItem("md5key"),
              activity_id: id,
              school_id: data.school_id,
              kemu_id: data.kemu_id,
              nianji_id: data.nianji_id,
              zhiwu_id: data.zhiwu_id,
              is_bzr: JSON.stringify(data.is_bzr),
              title: this.title,
              true_name: data.true_name,
              account: data.account,
              provincecode: data.provincecode,
              citycode: data.citycode,
              areacode: data.areacode,
            }).then((res) => {
              if (res.retInt == 1) {
                console.log(res, "报名成功");

                kemulists({
                  md5key: localStorage.getItem("md5key"),
                }).then((res) => {
                  res.retRes.forEach((item) => {
                    if (this.kemu_id == item.id) {
                      this.yymsg.file_url = item.gzh_file_url;
                      this.yymsg.kemu_id = this.kemu_id;
                      this.signSuccess = true;
                    }
                  });
                });

                // this.reload();
              }
            });
          }
        }
      });
    },
    //去活动详情
    goActiveDetails(id, type) {
      let { href } = this.$router.resolve({
        path: "/active/fullScreen",
        query: {
          id: id,
          type: type,
          from: "活动中心",
        },
      });
      window.open(href, "activeRes");
    },
    //点击教材教学去全部活动列表
    goJcjxAllAcList(id) {
      this.$router.push({
        name: "SeeMoreActive",
        query: {
          kejianbooks_id: id,
          typeTitle: "教学教材",
          type: "jcjx",
        },
      });
    },
    //点击活动标签去全部活动列表
    goBqAllAcList(id) {
      this.$router.push({
        name: "SeeMoreActive",
        query: {
          activityfl_id: this.acflbq.id,
          typeTitle: this.acflbq.title,
          type: "hd",
          activityfltag_id: id,
        },
      });
    },
    //点击查看更多去全部活动列表
    goAllAcList(e) {
      this.$router.push({
        name: "SeeMoreActive",
        query: {
          typeTitle: "全部",
          type: "all",
          zb_status:e,
        },
      });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style>
.el-dialog__headerbtn {
  /* color: #08a579; */
  position: absolute;
  top: 20px;
  right: 40px;
  width: 0;
  height: 0;
}
.el-dialog__headerbtn .el-dialog__close:hover {
  color: #08a579;
}
</style>
<style lang="less" scoped>
#container {
  background-color: #f0f2f5;
  main {
    margin: 0 auto;
    margin-top: 20px;
    width: 1200px;
    background-color: #f0f2f5;
    .caidan {
      display: none;
      position: relative;
      margin: 0 auto;
      width: 1200px;
      .floatingLeft {
        position: fixed;
        top: 200px;
        width: 116px;
        background: #ffffff;
        border-radius: 6px;
        z-index: 1;
        ul {
          cursor: pointer;
          li {
            margin-bottom: 1px;
            text-align: center;
            line-height: 48px;
            width: 120px;
            height: 56px;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
            span {
              display: inline-block;
              line-height: 56px;
              border-bottom: 1px solid #eff1f5;
            }
          }
          li:hover {
            background: #08a579;
            color: #fff;
          }
        }
        .choseLi {
          background: #08a579;
          color: #fff;
        }
      }
    }
    .top {
      position: relative;
      display: flex;
      // justify-content: space-between;
      margin-bottom: 20px;
      .left {
        width: 133px;
        height: 427px;
        background: #ffffff;
        border-radius: 13px 13px 13px 13px;
        opacity: 1;
        .tap {
          margin-bottom: 20px;
          // padding-left: 24px;
          line-height: 39px;
          // text-align: left;
          text-align: center;
          font-weight: 600;
          font-size: 18px;
          cursor: pointer;
          color: #333;
        }
        .tap:hover {
          background-color: #f2fefa;
          color: #07a579;
        }
      }
      .lunbo {
        margin-left: 21px;
        width: 740px;
        height: 427px;
        border-radius: 10px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
          border-radius: 10px;
        }
      }
      .noActive {
        width: 700px;
        img {
          width: 700px;
        }
      }
      .right {
        margin-left: 21px;
        width: 284px;
        height: 427px;
        border-radius: 13px;
        background-color: #fff;
        .touxiang {
          margin-top: 20px;
          margin-bottom: 21px;
          margin-left: 120px;
          width: 40px;
          height: 40px;
          border-radius: 100%;
          border: 1px solid #e4e4e4;
          img {
            width: 100%;
            max-height: 100%;
            border-radius: 100%;
          }
        }
        .msg {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          text-align: center;
          .Num {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            margin-bottom: 22px;
            .title {
              display: flex;
              margin-bottom: 13px;
              img {
                margin-right: 7px;
                height: 20px;
              }
              h5 {
                font-size: 16px;
                color: #07a579;
              }
            }
            .times {
              span {
                display: inline-block;
                font-size: 24px;
                font-weight: bold;
                color: #333;
              }
            }
          }
        }
        .bottom {
          width: 284px;
          height: 115px;
          // background: #f2faf8;
          border-radius: 13px;
          overflow: hidden;
          .myclass {
            margin: 0 auto;
            margin-top: 18px;
            width: 224px;
            height: 40px;
            background: #07a579;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            user-select: none;
          }
          .myclass:active {
            opacity: 0.8;
          }
          .kemu {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 10px;
            cursor: pointer;
            user-select: none;
            h3 {
              font-size: 16px;
              color: #07a579;
            }
            img {
              margin-left: 18px;
              width: 20px;
              cursor: pointer;
            }
          }
        }
      }
      .caidanMsg {
        position: absolute;
        left: 134px;
        width: 762px;
        height: 427px;
        overflow: hidden;
        z-index: 10;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 11px 0px 13px 0px #000000;
        box-shadow: -12px 0px 17px -13px #cccccc;
        overflow-y: scroll;
        .caidanContent {
          margin-left: 38px;
          margin-top: 22px;
          .bigTitle {
            display: flex;
            margin-bottom: 20px;
            h3 {
              font-size: 18px;
              color: #333;
            }
            p {
              position: relative;
              top: 5px;
              left: 8px;
              font-size: 14px;
              color: #656565;
            }
          }
          .details {
            margin-bottom: 38px;
            .bookTitle {
              margin-bottom: 18px;
              h4 {
                font-size: 16px;
                color: #333333;
                font-weight: normal;
              }
            }
            .fenlei {
              display: flex;
              flex-wrap: wrap;
              .flList {
                h5 {
                  display: inline-block;
                  margin-right: 58px;
                  margin-bottom: 18px;
                  font-size: 14px;
                  color: #656565;
                  cursor: pointer;
                }
              }
              .flList:hover {
                h5 {
                  color: #07a579;
                }
              }
            }
            .classTj {
              margin-top: 40px;
              h3 {
                margin-bottom: 28px;
                font-size: 18px;
                color: #333;
              }
              .classLists {
                display: flex;
                .classBox {
                  display: flex;
                  flex-direction: column;
                  margin-right: 30px;
                  margin-bottom: 30px;
                  cursor: pointer;
                  .pic {
                    margin-bottom: 8px;
                    width: 210px;
                    height: 118px;
                    background: #eff1f5;
                    border-radius: 14px;
                    img {
                      width: 100%;
                      max-height: 100%;
                      border-radius: 14px;
                    }
                  }
                  .title {
                    p {
                      width: 210px;
                      white-space: pre-wrap;
                      font-size: 14px;
                      color: #656565;
                    }
                  }
                }
                .classBox:hover {
                  .title {
                    p {
                      color: #07a579;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .caidanMsgNew {
        position: absolute;
        left: 134px;
        width: 762px;
        height: 427px;
        overflow: hidden;
        z-index: 10;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 11px 0px 13px 0px #000000;
        box-shadow: -12px 0px 17px -13px #cccccc;
        // overflow-y: scroll;
        .caidanContent {
          margin-left: 38px;
          margin-top: 12px;
          .bigTitle {
            display: flex;
            margin-bottom: 10px;
            h3 {
              font-size: 18px;
              color: #333;
            }
          }
          .classTj {
            margin-bottom: 10px;
            .classLists {
              display: flex;
              .classBox {
                display: flex;
                flex-direction: column;
                margin-right: 30px;
                cursor: pointer;
                .pic {
                  margin-bottom: 8px;
                  width: 210px;
                  height: 118px;
                  background: #eff1f5;
                  border-radius: 14px;
                  img {
                    width: 100%;
                    max-height: 100%;
                    border-radius: 14px;
                  }
                }
                .title {
                  p {
                    width: 210px;
                    white-space: pre-wrap;
                    font-size: 14px;
                    color: #656565;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2; // 控制多行的行数
                    -webkit-box-orient: vertical;
                  }
                }
              }
              .classBox:hover {
                .title {
                  p {
                    color: #07a579;
                  }
                }
              }
            }
          }
        }
      }
    }
    .teachers {
      position: relative;
      display: flex;
      align-items: center;
      margin: 0 auto;
      margin-bottom: 50px;
      width: 1200px;
      background: #ffffff;
      border-radius: 17px;
      h3 {
        margin-right: 90px;
        margin-left: 20px;
        font-size: 18px;
      }
      .leftAn {
        position: absolute;
        left: 120px;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        cursor: pointer;
        z-index: 1;
        img {
          width: 100%;
        }
      }
      .rightAn {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        cursor: pointer;
        z-index: 1;
        img {
          width: 100%;
        }
      }
      .leftAn:hover {
        opacity: 0.5;
      }
      .rightAn:hover {
        opacity: 0.5;
      }
      .teacherShow {
        position: relative;
        width: 940px;
        overflow: hidden;
        .teacherLists {
          display: flex;
          align-items: center;
          position: relative;
          border-radius: 10px;
          position: relative;
          left: 0px;
          cursor: pointer;
          .teacherBox {
            display: flex;
            align-items: center;
            margin-right: 48px;
            .pic {
              position: relative;
              margin: 20px 0;
              width: 80px;
              height: 80px;
              border-radius: 50%;
              img {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 80px;
                height: 80px;
                object-fit: contain;
                border-radius: 50%;
              }
            }
            .msg {
              display: flex;
              flex-direction: column;
              margin-left: 16px;
              h5 {
                margin-bottom: 7px;
                font-size: 14px;
                color: #333;
                font-weight: 600;
              }
              p {
                width: 100px;
                font-size: 12px;
                color: #999;
              }
            }
          }
          .teacherBox:first-of-type {
            // margin-left: 32px;
          }
          .teacherBox:hover {
            h5 {
              color: #08a579;
            }
          }
        }

        /deep/.el-dialog {
          border-radius: 20px;
        }
        .teacherShow1 {
          width: 400px;
          .personal {
            display: flex;
            align-items: center;
            margin-bottom: 29px;
            img {
              margin-right: 18px;
              width: 72px;
              border-radius: 50%;
            }
            .pertitle {
              h4 {
                margin-bottom: 12px;
                font-size: 16px;
                color: #333;
              }
              p {
                font-size: 14px;
                color: #666;
              }
            }
          }
          .msg {
            p {
              display: flex;
              color: #969799;
              line-height: 36px;
              span {
                position: relative;
                top: 13px;
                display: inline-block;
                margin-right: 12px;
                width: 8px;
                height: 8px;
                background: #d9dbde;
                opacity: 0.6;
                border-radius: 50%;
              }
              a {
                display: inline-block;
                width: 370px;
              }
            }
          }
          .dosome {
            display: flex;
            justify-content: space-around;
            margin-top: 30px;
            div {
              text-align: center;
              color: #fff;
              line-height: 32px;
              width: 100px;
              height: 32px;
              border-radius: 16px;
              cursor: pointer;
              background-color: #08a579;
            }
            .nomore {
              background-color: #d5d9de;
            }
          }
        }
      }
    }
    .actives {
      margin: 0 auto;
      width: 1200px;
      .contentBox {
        .topTitle {
          display: flex;
          justify-content: space-between;
          margin: 30px auto;
          margin-bottom: 48px;
          .left {
            display: flex;
            align-items: center;
            h2 {
              font-size: 24px;
              margin-right: 28px;
            }
            p {
              margin-top: 4px;
              font-size: 16px;
              color: #656565;
            }
          }
          .right {
            display: flex;
            align-items: center;
            cursor: pointer;
            p {
              margin-right: 6px;
              font-size: 16px;
              color: #656565;
            }
            img {
              width: 16px;
            }
          }
        }
        .content {
          display: flex;
          flex-wrap: wrap;
          height: 380px;
          overflow: hidden;
          .activeBox {
            position: relative;
            display: flex;
            flex-direction: column;
            margin-right: 20px;
            margin-bottom: 30px;
            width: 284px;
            height: 360px;
            background: #ffffff;
            border-radius: 15px 15px 15px 15px;
            cursor: pointer;
            .pic {
              width: 284px;
              height: 166px;
              // background: #989898;
              border-radius: 15px 15px 0px 0px;
              cursor: pointer;
              img {
                width: 100%;
                max-height: 100%;
                border-radius: 15px 15px 0px 0px;
                user-select: none;
              }
            }
            .actitle {
              margin: 16px 30px 18px 20px;
              font-size: 16px;
              width: 240px;
              cursor: pointer;
              h4 {
                line-height: 24px;
                color: #333;
                height: 50px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2; // 控制多行的行数
                -webkit-box-orient: vertical;
              }
            }
            .actitle:hover {
              h4 {
                color: #08a579;
              }
            }
            p {
              margin-left: 20px;
              font-size: 14px;
              color: #656565;
            }
            .bottom {
              position: absolute;
              bottom: 0;
              width: 100%;
              height: 75px;
              border-top: 1px solid #eff1f5;
              .zhuangtai {
                display: flex;
                // justify-content: center;
                align-items: center;
                margin-left: 20px;
                margin-top: 20px;
                border-radius: 12px;
                font-size: 14px;
                width: 242px;
                height: 35px;
                border: 1px solid #07a579;
                .time {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  // margin-left: 14px;
                  // padding-right: 16px;
                  text-align: center;
                  border-right: 1px solid #07a579;
                  width: 170px;
                  height: 35px;
                  line-height: 35px;
                  img {
                    width: 14px;
                  }
                  p {
                    margin-left: 5px;
                  }
                }
                .type {
                  width: 72px;
                  text-align: center;
                  height: 35px;
                  line-height: 35px;
                  // background-color: #07a579;
                  border-radius: 0 10px 10px 0;
                  cursor: pointer;
                }
              }
              .novideo {
                border: 1px solid #cbcbcb;
              }
            }
          }
          .activeBox:nth-of-type(4n) {
            margin-right: 0;
          }
          .noactive {
            -webkit-user-select: none;
            cursor: default;
            pointer-events: none;
          }
        }
      }
    }
    .signSuccessBox {
      /deep/.el-dialog__header {
        padding: 0;
      }
      /deep/.el-dialog {
        border-radius: 20px;
      }
      /deep/.el-dialog__body {
        padding: 0;
      }
      /deep/.el-icon-close:before {
        color: #fff;
      }
      .top {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 320px;
        height: 240px;
        background-image: url("../../assets/img/bmsbg01.png");
        border-radius: 20px 20px 20px 20px;
        background-size: 100%;
        img {
          margin-top: 54px;
          text-align: center;
          width: 64px;
          height: 64px;
        }
        h3 {
          text-align: center;
          font-size: 20px;
          color: #ffffff;
          line-height: 72px;
        }
      }
      .signSuccessContent {
        overflow: hidden;
        h3 {
          margin: 25px auto;
          width: 320px;
          text-align: center;
          font-size: 20px;
          color: #f5484b;
        }
        .pic {
          margin: 0 auto;
          margin-bottom: 10px;
          width: 200px;
          height: 200px;
          border: 1px solid #dedede;
          img {
            width: 200px;
            height: 200px;
          }
        }
        p {
          margin-bottom: 15px;
          text-align: center;
          font-size: 16px;
          color: #969799;
        }
      }
    }
    .choseClass {
      /deep/.el-dialog {
        border-radius: 20px;
        height: 300px;
      }
      /deep/.el-dialog__header {
        padding: 0;
      }
      //首次弹出框的样式
      .chose {
        position: relative;
        margin-left: 40px;
        cursor: pointer;
        p {
          margin: 20px 0;
          margin-bottom: 20px;
          color: #646566;
        }
        .taps {
          display: flex;
          flex-wrap: wrap;
          .classRadio {
            display: flex;
            margin-right: 79px;
            .tips {
              position: relative;
              top: 2px;
              margin-right: 8px;
              width: 14px;
              height: 14px;
              border: 1px solid #cccccc;
              border-radius: 100%;
              line-height: 12px;
              text-align: center;
              span {
                display: inline-block;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 9px;
                height: 9px;
                background-color: #fff;
                border-radius: 100%;
              }
            }
            .tips2 {
              border: 1px solid #08a579;

              span {
                background-color: #08a579;
              }
            }
            p {
              margin: 0;
            }
          }
        }
        .tab2 {
          .classRadio {
            margin-bottom: 10px;
          }
        }
        .submitSet {
          position: absolute;
          right: 20px;
          bottom: -80px;
          width: 120px;
          height: 40px;
          background: #08a579;
          color: #fff;
          border-radius: 6px;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
